<style scoped="true" lang="less">
    .cinema {
        border-bottom: 1px solid #fff;

        .title {
            height: 40px;
            display: flex;
            align-items: center;
            color: #636363;
        }
    }

    .list {
        background: #fff;
    }
    a.link {
        color: #000;
        height: 97px;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        border-bottom: 1px solid #e1e1e1;
        padding: 10px 16px 12px 16px;
        .addr {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .name {
            display: flex;
            justify-content: space-between;
            .seat {
                margin-left: 5px;
                color: #fc7103;
                font-size: 12px;
                display: inline-block;
                padding: 2px;
                border: 1px solid #fc7103;
                border-radius: 50%;
            }
        }
    }

</style>

<template>
    <div id="cinemas">
        <div class="cinema" v-for="(value,key,index) in obj" :key="key">
            <h3 class="title pd-left-16" @click="open(index)">{{key}}</h3>
            <div class="list-box" v-if="active === index">
                <ul class="list">
                    <li class="item pd-lr-16" v-for="(item) in value" :key="item.id">
                        <router-link :to="`detail/${item.id}`" class="link">
                            <p class="name f16">
                                <span>{{item.name}}<i class="seat">座</i></span>
                                <van-icon class="ccc f12" name="arrow" />
                            </p>
                            <p class="addr f12 ccc">{{item.address}}</p>
                            <p class="dis f12 ccc">距离</p>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
        
        <!--<li v-if="active===0"></li>
        <li v-if="active===1"></li>
        <li v-if="active===2"></li>
        <li v-if="active===3"></li>
        <li v-if="active===4"></li>-->
        
    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Icon
    } from 'vant'
    import {
        loadingBegin,
        loadingFinish
    } from '@/utils'
    export default {
        data() {
            return {
                // 当前打开的影院列表
                active: 0,
                // 组装后的包含所有数据的对象
                obj: {}
            }
        },
        components: {
            [Icon.name]: Icon
        },
        created() {
            this.getList();
        },
        methods: {
            // 跳转到详情
            toDetail(id) {
                this.$router.push({
                    path: 'detail',
                    query: {
                        id
                    }
                })
            },

            // 展开列表
            open(index) {
                // 如果该影院列表已打开,则收起来
                if (this.active === index) {
                    // -1表示所有列表都收起来
                    this.active = -1;
                } else {
                    this.active = index;
                }
            },

            // 获取电影列表
            getList() {
                const url = '/cinema';
                const data = {};
                loadingBegin();
                this.fetch(url, data, (res) => {
                    loadingFinish();
                    this.cinemas = res.cinemas;
                    // 组装数据
                    this.installArr(res.cinemas)
                })
            },

            // 对数据进行重新组合
            installArr(cinemas) {
                // 使用set对象可以去重
                let set = new Set();
                // 把电影院的名称全部添加到set里面
                cinemas.forEach(item => {
                    set.add(item.district.name);
                })
                // 定义一个空对象,用来存放组装后的数据
                let obj = {};
                // 迭代
                for (let key of set) {
                	// 筛选符合添加的电影院
                    obj[key] = cinemas.filter(item => {
                        return item.district.name === key;
                    })
                }
                this.obj = obj;
            }
        }
    }

</script>
